<template>
  <div
    class="screenFullWeekly"
    :style="{
      background: `url(${require('@/assets/weekScroll_bg.png')}) no-repeat fixed`,
      backgroundSize: 'cover',
    }"
  >
    <!-- 周报：本周、下周、上周 -->
    <div class="toolbar">
      <div class="ceil">
        <div class="statistics">
          <div class="item">
            <i class="el-icon-user-solid"></i>
            已填报人数：
            <span class="num">{{ importInfo.hasImport }}</span>
          </div>
          <div class="item">
            <i class="el-icon-user"></i>
            未填报人数：
            <span class="num">{{ importInfo.noImport }}</span>
          </div>
        </div>
        <el-button-group style="margin-right:5%">
          <el-button size="medium" @click="handleChangeWeekStatus('pre')"
            >上{{planType}}</el-button
          >
          <el-button size="medium" @click="handleChangeWeekStatus('current')"
            >本{{planType}}</el-button
          >
          <el-button size="medium" @click="handleChangeWeekStatus('next')"
            >下{{planType}}</el-button
          >
        </el-button-group>
        <el-button-group class="action">
           <el-button
            size="medium"
            @click="togglePlanType"
          >切换{{ planType == '周' ? '月' : '周' }}报</el-button>
          <el-button
            size="medium"
            icon="el-icon-back"
            @click="$router.back(-1)"
          ></el-button>
          <el-button
            size="medium"
            :icon="play ? ' el-icon-video-pause' : ' el-icon-video-play'"
            @click="togglePlay"
          ></el-button>
          <el-button
            size="medium"
            icon="el-icon-full-screen"
            @click="toggleFullscreen"
          ></el-button>
        </el-button-group>
      </div>
      <div v-if="isRresh" :class="noImportNum == 0 ? 'unNotice' : 'notice'">
        <el-popover
          placement="top-start"
          width="500"
          trigger="hover"
          :content="no_import_user_list || ''"
        >
          <notice-bar
            slot="reference"
            class="noticeBar"
            style="border-radius: 13px"
            :text="no_import_user_list || ''"
            :speed="25"
            bg-color="#fff9e3"
            color="#f17112"
            :outview="false"
            :left-icon="require('@/assets/notice.png')"
          />
        </el-popover>
      </div>
      <h1 class="title">
        {{ reportTitle }}
      </h1>
    </div>
    <!-- 日报列表 -->
    <week-month-report-list
      v-loading.fullscreen="loading"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0)"
      :planType="planType"
      :printing="true"
      :weekRecords="weelyReportDatas"
      class="report-list"
    />
    <!-- <div v-if="noMore && weelyReportDatas.length" class="list-empty">
      没有更多了
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from "moment";
import screenfull from "screenfull";
import {
  parseTime,
  groupBy,
  dataURLtoFile,
  getWeekDays,
} from "@/utils/index.js";
import { getWeekSchedule } from "@/api/plann.js";
import { NoticeBar } from "vue-easy-notice-bar";
export default {
  name: "ScreenFullWeekly",
  computed: {
    ...mapGetters(["name", "id", "department", "screenfull_name"]),
    device() {
      return this.$store.state.app.device;
    },
    username() {
      return this.name && this.name.split("(")[0];
    },
    reportTitle() {
      const title = this.screenfull_name || "中共文山州委办公室干部职工每周重点工作情况晾晒表"
      if(this.planType === '周') {
        return title
      }
      return title.replace('周', '月')
    }
  },
  components: {
    NoticeBar,
    FilterForm: () => import("../components/FilterForm.vue"),
    WeekMonthReportList: () => import("../components/WeekMonthReportList.vue"),
    FileNameFormModal: () => import("../components/FileNameFormModal"),
    DateSelectFormModal: () => import("../components/DateSelectFormModal.vue"),
  },
  data() {
    return {
      weelyReportDatas: [],
      currentDay: moment().subtract(7, "d").format("YYYY-MM-DD"),
      planType: '周',
      loading: false,
      filterParam: null,
      pdfOption: "toPdf",
      dialogFileNameVisible: false,
      dialogDateFormVisible: false,
      page: 1, // 滚动加载页码
      pageSize: 5, // 每页加载数量
      noMore: false, // 是否还有更多
      weekIntervel: null, // 定时器
      play: true,
      isFullScreen: false,
      isFirstScroll: true,
      importInfo: {
        hasImport: 0,
        noImport: 0,
      },
      isRresh: true, //控制通告刷新
      no_import_user_list: "", //未填报人名字列表
      noImportNum: 0, //未填报人数量
    };
  },
  mounted() {
    this.fetchWeeklyPlanList();
    this.handleAutoScroll();
  },
  methods: {
    parseTime,
    // 切换报告类型
    togglePlanType() {
      this.planType = this.planType === '周' ? '月' : '周'
      this.currentDay = moment().subtract(1, 'months').format("YYYY-MM-DD");
      this.clearScrollParam();
      this.fetchWeeklyPlanList();
      this.handleAutoScroll();
    },
    // 全屏按钮点击事件
    toggleFullscreen() {
      if (!screenfull.isEnabled) {
        return false;
      }
      this.isFullScreen ? screenfull.exit() : screenfull.request();
      this.isFullScreen = !this.isFullScreen;
    },
    togglePlay() {
      if (this.play) {
        clearInterval(this.weekIntervel);
      } else {
        this.handleAutoScroll();
      }
      this.play = !this.play;
    },
    // 页面自动滚动
    handleAutoScroll() {
      if (this.weekIntervel) clearInterval(this.weekIntervel);
      this.weekIntervel = setInterval(() => {
        if (this.loading) return;
        const container = document.querySelector(".screenFullWeekly");
        if (!container) {
          clearInterval(this.weekIntervel);
          return;
        }
        const { scrollTop, clientHeight, scrollHeight } = container;
        if (!this.isFirstScroll && !scrollTop) {
          clearInterval(this.weekIntervel);
          return;
        }
        if (Math.round(scrollTop) + clientHeight != scrollHeight) {
          container.scrollTop++;
        } else {
          container.scrollTop = 1;
        }
        this.isFirstScroll = false;
      }, 50);
    },
    // 点击本周 上周 下周
    handleChangeWeekStatus(value) {
      if (value === "pre") {
        if (this.planType === '周') {
          this.currentDay = moment(this.currentDay).subtract(7, "d").format("YYYY-MM-DD");
        } else {
          this.currentDay = moment(this.currentDay).subtract(1, 'months').format("YYYY-MM-DD");
        }
      } else if (value === "next") {
        if (this.planType === '周') {
          this.currentDay = moment(this.currentDay).add(7, "d").format("YYYY-MM-DD");
        } else {
          this.currentDay = moment(this.currentDay).add(1, 'months').format("YYYY-MM-DD");
        }
      } else {
        this.currentDay = moment().subtract(7, "d").format("YYYY-MM-DD");
      }
      // 请求数据
      setTimeout(() => {
        this.clearScrollParam();
        this.fetchWeeklyPlanList();
      }, 100);
    },
    // 清除滚动查询参数
    clearScrollParam() {
      this.page = 1;
      this.noMore = false;
      this.play = true;
      this.isFirstScroll = true;
      this.weelyReportDatas = [];
      this.handleAutoScroll();
    },
    /**
     * 请求日历报告记录
     */
    async fetchWeeklyPlanList(filter = {}) {
      this.loading = true;
      this.isRresh = false;
      let startDate = null
      let endDate = null
      if(this.planType === '周') {
        const weekDays = getWeekDays(this.currentDay);
        startDate = weekDays[0];
        endDate = weekDays[weekDays.length - 1];
      } else {
        startDate = moment(this.currentDay).startOf('month').format("YYYY-MM-DD")
        endDate = moment(this.currentDay).endOf('month').format("YYYY-MM-DD")
      }

      const param = {
        type: this.planType,
        department: this.department,
        is_push: 1,
        date_start: startDate,
        date_end: endDate,
        page: this.page,
        page_size: 1000,
      };
      this.filterParam = filter;
      try {
        const { data: result = {} } = await getWeekSchedule({
          ...param,
          ...filter,
        });
        const {
          data,
          import: hasImport,
          noimport: noImport,
          no_import_user_list,
        } = result;
        this.no_import_user_list =
          this.dealUnimportUserList(no_import_user_list);
        this.noImportNum = noImport;
        this.isRresh = true;
        this.weelyReportDatas = [...this.weelyReportDatas, ...data];
        if (!data.length || data.length < this.pageSize) {
          this.noMore = true;
        }
        if (this.page == 1) {
          this.importInfo = { hasImport, noImport };
        }
        this.page++;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    //处理未填报人名字
    dealUnimportUserList(userList) {
      let str = "未填报人员：";
      for (let item of userList) {
        str = str + item.first_name + " ，";
      }
      return str.substring(0, str.length - 1);
    },
    groupRecordsByWeek(list) {
      if (!list.length) return [];
      // 按周分组
      const groupWeek = groupBy(list, "week_date");
      return Object.keys(groupWeek)
        .sort((a, b) => +b - +a)
        .map((key) => {
          const records = groupWeek[key];
          return { week: key, records };
        });
    },
  },
  destroyed() {
    clearInterval(this.weekIntervel);
  },
};
</script>
<style lang="scss" scope>
.screenFullWeekly {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  transition: all 3s ease-in-out;
  .toolbar {
    width: 100%;
    position: fixed;
    padding: 10px 0 0;
    // text-align: center;
    background: #fafafa;
    z-index: 99;
    .ceil {
      display: flex;
      justify-content: space-between;
      .statistics {
        // position: absolute;
        // top: 10px;
        // left: 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        padding: 10px;
        .item {
          margin-left: 20px;
          i {
            font-size: 18px;
          }
          .num {
            font-size: 16px;
            // font-weight: bold;
            color: #fb5b4a;
          }
        }
      }
      .action {
        margin-left: 10px;
      }
    }
    .title {
      margin: -3px 0 0;
      background: linear-gradient(45deg, #e06d02, #cc020c);
      padding: 20px 0;
      color: #ffff00;
      font-size: 43px;
      text-align: center;
    }

    .notice {
      padding: 5px;
      min-height: 31px;
      width: 100%;
      .noticeBar {
        width: 100%;
        height: 36px !important;
        line-height: 36px !important;
        margin-right: 5px;
        .text-container {
          margin-left: 18px !important;
        }
      }
    }
    .unNotice {
      display: none;
    }
  }
  .report-list {
    padding-top: 190px;
    margin: 0;
    .box-card {
      width: 80% !important;
    }
    .el-empty {
      display: none;
    }
  }
  .list-empty {
    text-align: center;
    margin-bottom: 10px;
    color: #999;
  }
}
</style>